<template>
  <nav>
    <!-- <router-link to="/">Home</router-link> | -->
    <!-- <router-link to="/about">About</router-link> -->
  </nav>
  <router-view/>
</template>
<script setup>
import { watch, ref } from 'vue'
import router from '@/router'
// 创建一个响应式的屏幕宽度变量
const screenWidth = ref(window.innerWidth);
// 监听屏幕宽度的变化
watch(screenWidth, (newWidth) => {
  // console.log('屏幕宽度变化：', newWidth);
  if (newWidth < 762) {
    // 当屏幕宽度小于 762 像素时，跳转到 /About 页面
    router.push('/About');
  } else {
    router.push('/');
  }
});

// 监听窗口大小变化事件，更新屏幕宽度变量
window.addEventListener('resize', () => {
  screenWidth.value = window.innerWidth;
});
</script>

<style>

</style>
